<template>
  <template v-if="func.isNotEmpty(dicts)">
    <EaTag v-for="dict in dicts" :key="dict?.id" :type="dict?.type" :effect="props.effect" :cls="dict?.cls"
      :icon="dict?.icon" :label="dict?.label" />
  </template>
  <template v-else-if="func.isNotEmpty(props.value)">{{ props.value }}</template>
  <template v-else>-</template>
</template>

<script setup lang="ts">
import { func } from '@/utils/func'
import { computed } from 'vue'
import EaTag from './EaTag.vue'

interface DictData {
  id?: string | number
  code?: string
  value?: string | number | boolean | Array<number> | Array<string>
  label?: string
  def?: boolean
  sort?: number
  type?: any
  cls?: string
  icon?: string
  tip?: string
}

interface Props {
  // 字典数据数组
  dictData: Array<DictData>,
  // 要匹配的值
  value: {
    type: string | number | boolean | Array<number> | Array<string>
    required: true
  }
  ,
  // dark , plain , light
  effect: 'plain' | 'light' | 'dark'
}

const props = withDefaults(defineProps<Props>(), {})

const dicts = computed(() => {
  if (func.isEmpty(props.value)) {
    return null
  }
  const values = Array.isArray(props.value) ? props.value : [props.value];
  return values.map((val:any) => {
    return props.dictData.find((item:DictData) => {
      return String(item.value) === String(val);
    });
  })
});

</script>
